<template>
    <div>
        <!-- 新增人员弹出框 -->
        <div class="updatePwd" v-show="updatePopShow">
            <transition name="slide-fade">
                <div class="updatePwd-content" v-show="updatePopShow">
                    <div class="up-content-title">
                        <div>
                            选择人员
                        </div>
                        <div @click="cancelClick">
                            X
                        </div>
                    </div>
                    <div class="up-content-main">
                        <div class="transfer-left">
                            <div class="transfer-title">
                                选择：
                            </div>
                            <div class="transfer-main transfer-mainLeft">
                                <div class="transfer-ml-search">
                                    <div>
                                        <div>
                                            <img src="/static/img/搜索.png" alt="">
                                        </div>
                                        <div>
                                            <input type="text" placeholder="请输入手机号或姓名" v-model="leftSearchVal">
                                        </div>
                                        <div v-show="searchValClearShow" @click="clear">
                                            <img src="/static/img/清空.png" alt="">
                                        </div>
                                    </div>
                                </div>
                                <div v-show="searchListShow" class="transfer-ml-bread">
                                    <div class="transfer-ml-breadMain">
                                        <ul>
                                            <li v-show="breadListsOvShow" class="breadMainLiBack">
                                                <div @click="breadListsSelectOneClick">
                                                    «
                                                </div>
                                            </li>
                                            <li :class="{breadMainLi:true,breadMainSeleteLi:isBreadMainSeleteLi == index}" :key="index" v-for="(item,index) in breadLists">
                                                <div @click="breadListsClick(index)">{{item.name}}</div>
                                                <div v-show="isBreadMainSeleteLi != index">></div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="transfer-ml-selectAll" v-show="memberLeftList.length > 0 && searchListShow">
                                    <div class="transfer-ml-selectAllMain" @click="leftSelectAllClick">
                                        <div>
                                            <img v-if="transferselectAllShow" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                                            <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                                        </div>
                                        <div>
                                            全选
                                        </div>
                                    </div>
                                </div>
                                <div v-show="searchListShow" class="transfer-ml-list">
                                    <ul>
                                        <li class="transferMlListLi" :key="index" v-for="(item,index) in deptLeftList">
                                            <div class="transferMlListLiLeft">
                                                <div class="trMlLiLiLeSlect">
                                                    <div>
                                                        <img v-if='item.isCompany' src="/static/img/enterprise.jpg" alt="">
                                                        <img v-else src="/static/img/dept.jpg" alt="">
                                                    </div>
                                                </div>
                                                <div class="trMlLiLiLeSlectTypeDept">
                                                    {{item.name}}
                                                </div>
                                            </div>
                                            <div class="transferMlListLiRight">
                                                <img @click="leftNextClick(index)" src="/static/img/下一级.png" alt="">
                                                <div @click="leftNextClick(index)">下级</div>
                                            </div>
                                        </li>
                                    </ul>
                                    <ul>
                                        <li class="transferMlListLi" :key="index" v-for="(item,index) in memberLeftList">
                                            <div class="transferMlListLiLeft">
                                                <div class="trMlLiLiLeSlect">
                                                    <div @click="transferPLListsSelectClick(index)">
                                                        <img v-if="item.show" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                                                        <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                                                    </div>
                                                </div>
                                                <div class="trMlLiLiLeSlectType" @click="transferPLListsSelectClick(index)">
                                                    <div class="trMlLiLiLeSlectTypeOne">
                                                        <img v-if="item.profile" :src="item.profile" alt="">
                                                        <div v-else>{{item.name | userNickFun}}</div>
                                                    </div>
                                                    <div>{{item.name}}</div>
                                                </div>
                                            </div>
                                            <div class="transferMlListLiRight">
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div v-show="!searchListShow" class="transfer-ml-searchList">
                                    <ul>
                                        <li class="transferMlListLi" v-show="memberLeftList.length > 0" :key="index" v-for="(item,index) in memberLeftList">
                                            <div class="transferMlListLiLeft">
                                                <div class="trMlLiLiLeSlect">
                                                    <div @click="transferPLListsSelectClick(index)">
                                                        <img v-if="item.show" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                                                        <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                                                    </div>
                                                </div>
                                                <div class="trMlLiLiLeSlectType">
                                                    <div class="trMlLiLiLeSlectTypeOne">
                                                        <img v-if="item.profile" :src="item.profile" alt="">
                                                        <div v-else>{{item.name | userNickFun}}</div>
                                                    </div>
                                                    <div>{{item.name}}</div>
                                                </div>
                                            </div>
                                            <div class="transferMlListLiRight">
                                            </div>
                                        </li>
                                        <li class="transferMlListNullLi" v-show="memberLeftList.length == 0">
                                            {{transferMlListNullLiTost}}
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="transfer-right">
                            <div class="transfer-title">
                                已选：
                            </div>
                            <div class="transfer-main transfer-mainRight">
                                <ul>
                                    <li class="transferPRLi" :key="index" v-for="(item,index) in memberRightList">
                                        <div>
                                            <div class="trMlLiLiLeSlectTypeOne">
                                                <img v-if="item.profile" :src="item.profile" alt="">
                                                <div v-else>{{item.name | userNickFun}}</div>
                                            </div>
                                            <div>{{item.name}}</div>
                                        </div>
                                        <div @click="righttransferPRListsClick(index)">
                                            <img src="/static/img/清空.png" alt="">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="up-content-but">
                        <div></div>
                        <div @click="affirmClick">
                            保存
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>
<script>
    import { mapActions } from "vuex";
    export default {
        props: [
            "isupdatePop",
            "transferPDepitLListspop",
            "transferPUserLListspop",
            "userselectpop",
            "appID"
        ],
        data() {
            return {
                leftNextClickTrue: false,
                transferMlListNullLiTost: "",
                searchListShow: true,
                leftSearchVal: "", // 搜索
                searchValClearShow: false, // 搜索清空搜索清空
                breadListsOvShow: false, // 导航超过三个显示
                updatePopShow: false, // 人员选择列表
                memberRightList: [], //选中人员列表
                isBreadMainSeleteBackShow: false, // 返回顶部
                transferselectAllShow: false, // 全选
                isBreadMainSeleteLi: 0, // 选中导航
                breadLists: [{ name: "通讯录" }], // 人员面包屑
                breadCopyLists: [{ name: "通讯录" }], // 人员面包屑监视数组
                deptLeftList: [], // 成员未选中列表-部门
                memberLeftList: [] // 成员未选中列表-人员
            };
        },
        created: function () { },
        mounted: function () { },
        watch: {
            leftSearchVal(val) {    //输入框搜索
                var self = this;
                if (val.length > 0) {
                    self.searchListShow = false;
                    self.searchValClearShow = true;
                    // 检索成员信息
                    self.getapideptfinddeptmembertree({
                        search: val,
                        type: 0,
                        id: sessionStorage.getItem('ORGID')
                    }).then(data => {
                        self.memberLeftList = [];
                        self.deptLeftList = [];
                        if (data.statusCode == 200) {
                            if (data.data.members) {
                                var arr = [];
                                data.data.members.forEach(function (ele, ind) {
                                    arr.push({
                                        memberId: ele.id,
                                        name: ele.name,
                                        show: false
                                    });
                                });
                                self.memberLeftList = arr;
                                self.transferMlListNullLiTost = "";
                            } else {
                                self.transferMlListNullLiTost = "暂无数据";
                            }
                        } else {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                            self.transferMlListNullLiTost = "暂无数据";
                        }
                    }).catch(msg => {
                        self.memberLeftList = [];
                        self.transferMlListNullLiTost = "暂无数据";
                        self.deptLeftList = [];
                        self.$message({
                            type: "info",
                            message: "服务器异常"
                        });
                    });
                } else {
                    self.searchListShow = true;
                    self.searchValClearShow = false;
                    self.breadLists = [
                        {
                            name: "通讯录",
                            id: sessionStorage.getItem("ORGID"),
                            isCompany: 1,
                        }
                    ];
                    self.breadCopyLists = [
                        {
                            name: "通讯录",
                            id: sessionStorage.getItem("ORGID"),
                            isCompany: 1,
                        }
                    ];
                    self.isBreadMainSeleteLi = 0;
                    self.getapideptfinddeptmembertree({
                        search: '',
                        type: 0,
                        id: sessionStorage.getItem('ORGID')
                    }).then(data => {
                        self.memberLeftList = [];
                        self.deptLeftList = [];
                        if (data.statusCode == 200) {
                            if (data.data) {
                                self.deptLeftList = []  //左侧部门企业
                                self.deptLeftList.push({
                                    id: sessionStorage.getItem("ORGID"),
                                    name: data.data.name,
                                    isCompany: 1,
                                    show: false
                                })
                                var leftPArr = [];
                                var leftPSlectArr = [];
                                self.memberLeftList.forEach(function (elel, indl) {
                                    self.memberRightList.forEach(function (eler, indr) {
                                        if (eler.memberId == elel.memberId) {
                                            leftPSlectArr.push(eler);
                                            self.memberLeftList[indl].show = true;
                                        }
                                    });
                                });
                                if (leftPSlectArr.length == self.memberLeftList.length) {
                                    self.transferselectAllShow = true;
                                } else {
                                    self.transferselectAllShow = false;
                                }
                            }
                        } else {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                        }
                    }).catch(msg => {
                        self.memberLeftList = [];
                        self.deptLeftList = [];
                        self.$message({
                            type: "info",
                            message: "服务器异常"
                        });
                    });
                }
            },

            isupdatePop(val) {  //弹框第一次弹出
                var self = this;
                self.transferselectAllShow = false;
                self.leftSearchVal = "";
                self.deptLeftList = [];
                self.memberLeftList = [];
                self.memberRightList = [];
                self.breadListsOvShow = false;
                self.getapideptfinddeptmembertree({
                    search: self.leftSearchVal,
                    type: 0,
                    id: sessionStorage.getItem('ORGID')
                }).then(data => {
                    if (data.statusCode == 200) {
                        if (data.data) {
                            self.deptLeftList = []  //左侧部门企业
                            self.deptLeftList.push({
                                id: sessionStorage.getItem("ORGID"),
                                name: data.data.name,
                                isCompany: 1,
                                show: false
                            })
                        }
                    } else {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                    }
                }).catch(msg => {
                    self.$message({
                        type: "info",
                        message: "服务器异常"
                    });
                });
                this.updatePopShow = val;
                self.breadLists = [
                    {
                        name: "通讯录",
                        id: sessionStorage.getItem("ORGID"),
                        isCompany: 1,
                    }
                ];
                self.breadCopyLists = [
                    {
                        name: "通讯录",
                        id: sessionStorage.getItem("ORGID"),
                        isCompany: 1,
                    }
                ];
                self.isBreadMainSeleteLi = 0;
            },


            transferPDepitLListspop(val) {
                var self = this;
                // this.deptLeftList = val;
            },
            appID: {
                handler(val) {
                    var self = this;
                    console.log(val);
                },
                deep: true
            },
            transferPUserLListspop(val) {
                var self = this;
                // this.memberLeftList = val;
            }
        },
        methods: {
            //搜索清空
            clear() {
                this.breadListsOvShow = false
                this.leftSearchVal = "";
            },

            // 人员确认
            affirmClick() {
                var self = this;
                this.updatePopShow = false;
                var prStr = [];
                this.$emit("affirm", self.memberRightList);
            },
            // 人员取消
            cancelClick() {
                var self = this;
                this.updatePopShow = false;
                this.$emit("cancel");
            },

            // 左边点击返回第一层
            breadListsSelectOneClick() {
                var self = this;
                self.leftSearchVal = ''
                self.breadLists = [];
                self.breadCopyLists.splice(1, self.breadCopyLists.length);
                self.breadLists.unshift({
                    name: "通讯录",
                    id: sessionStorage.getItem("ORGID"),
                    isCompany: 1,
                });
                self.isBreadMainSeleteLi = self.breadLists.length - 1;
                self.breadListsOvShow = false;
                self.getapideptfinddeptmembertree({
                    search: '',
                    type: 0,
                    id: sessionStorage.getItem('ORGID')
                }).then(data => {
                    self.memberLeftList = [];
                    self.deptLeftList = [];
                    if (data.statusCode == 200) {
                        if (data.data) {
                            self.deptLeftList = []  //左侧部门企业
                            self.deptLeftList.push({
                                id: sessionStorage.getItem("ORGID"),
                                name: data.data.name,
                                isCompany: 1,
                                show: false
                            })
                            var leftPArr = [];
                            var leftPSlectArr = [];
                            self.memberLeftList.forEach(function (elel, indl) {
                                self.memberRightList.forEach(function (eler, indr) {
                                    if (eler.memberId == elel.memberId) {
                                        leftPSlectArr.push(eler);
                                        self.memberLeftList[indl].show = true;
                                    }
                                });
                            });
                            if (leftPSlectArr.length == self.memberLeftList.length) {
                                self.transferselectAllShow = true;
                            } else {
                                self.transferselectAllShow = false;
                            }
                        }
                    } else {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                    }
                }).catch(msg => {
                    self.memberLeftList = [];
                    self.deptLeftList = [];
                    self.$message({
                        type: "info",
                        message: "服务器异常"
                    });
                });
            },

            // 左边点击导航
            breadListsClick(index) {
                var self = this;
                self.leftSearchVal = ''
                var indeName = self.breadLists[index].name;
                let typeStr = 1
                if (self.breadListsOvShow == false) {
                    if (index == 0 || index == 1) {
                        typeStr = 0
                    }
                } else if (self.breadListsOvShow == true) {
                    if (self.breadCopyLists.length == 4) {
                        if (index == 0) {
                            typeStr = 0
                        }
                    }
                }
                self.getapideptfinddeptmembertree({
                    search: '',
                    type: typeStr,
                    id: self.breadLists[index].id
                }).then(data => {
                    self.memberLeftList = [];
                    self.deptLeftList = [];
                    if (data.statusCode == 200) {
                        if (data.data) {
                            if (index == 0 && self.breadCopyLists.length != 4) {
                                self.deptLeftList = []  //左侧部门企业
                                self.deptLeftList.push({
                                    id: sessionStorage.getItem('ORGID'),
                                    name: data.data.name,
                                    isCompany: 1,
                                    show: false
                                })
                            } else {
                                if (data.data.child) {
                                    var arr = [];
                                    data.data.child.forEach(function (ele, ind) {
                                        arr.push({
                                            id: ele.id,
                                            name: ele.name,
                                            show: false,
                                            isCompany: ele.isCompany
                                        });
                                    });
                                    self.deptLeftList = arr;
                                }
                                if (data.data.members) {
                                    var arr = [];
                                    data.data.members.forEach(function (ele, ind) {
                                        arr.push({
                                            memberId: ele.id,
                                            name: ele.name,
                                            show: false,
                                        });
                                    });
                                    self.memberLeftList = arr;
                                }
                            } if (self.breadCopyLists.length > 3) {
                                self.breadLists = [];
                                var selectIndex = 0;
                                self.breadCopyLists.forEach(function (ele, ind) {
                                    if (ele.name == indeName) {
                                        selectIndex = ind;
                                        self.breadLists.unshift({
                                            name: self.breadCopyLists[ind].name,
                                            isCompany: self.breadCopyLists[ind].isCompany,
                                            id: self.breadCopyLists[ind].id
                                        });
                                        if (ind > 0) {
                                            self.breadLists.unshift({
                                                name: self.breadCopyLists[ind - 1].name,
                                                isCompany: self.breadCopyLists[ind - 1].isCompany,
                                                id: self.breadCopyLists[ind - 1].id
                                            });
                                            selectIndex = ind;
                                            if (ind > 1) {
                                                self.breadLists.unshift({
                                                    name: self.breadCopyLists[ind - 2].name,
                                                    isCompany: self.breadCopyLists[ind - 2].isCompany,
                                                    id: self.breadCopyLists[ind - 2].id
                                                });
                                                selectIndex = ind;
                                            }
                                        }
                                    }
                                });
                                self.breadCopyLists.splice(
                                    selectIndex + 1,
                                    self.breadCopyLists.length
                                );
                                if (self.breadCopyLists.length > 3) {
                                    self.breadListsOvShow = true;
                                } else {
                                    self.breadListsOvShow = false;
                                }
                            } else {
                                self.breadLists = [];
                                self.breadCopyLists.splice(
                                    index + 1,
                                    self.breadCopyLists.length
                                );
                                self.breadCopyLists.forEach(function (ele, ind) {
                                    self.breadLists.push({
                                        name: ele.name,
                                        isCompany: ele.isCompany,
                                        id: ele.id
                                    });
                                });
                                self.breadListsOvShow = false;
                            }
                            self.isBreadMainSeleteLi = self.breadLists.length - 1;
                            var leftPArr = [];
                            var leftPSlectArr = [];
                            self.memberLeftList.forEach(function (elel, indl) {
                                self.memberRightList.forEach(function (eler, indr) {
                                    if (eler.memberId == elel.memberId) {
                                        leftPSlectArr.push(eler);
                                        self.memberLeftList[indl].show = true;
                                    }
                                });
                            });
                            if (leftPSlectArr.length == self.memberLeftList.length) {
                                self.transferselectAllShow = true;
                            } else {
                                self.transferselectAllShow = false;
                            }
                        }
                    } else {
                        self.$message({
                            type: "info",
                            message: data.statusMessage
                        });
                    }
                }).catch(msg => {
                    self.memberLeftList = [];
                    self.deptLeftList = [];
                    self.$message({
                        type: "info",
                        message: "服务器异常"
                    });
                });
            },
            // 左边下一级
            leftNextClick(index) {
                var self = this;
                // 获取下一级导航变化
                if (self.leftNextClickTrue == false) {
                    self.leftNextClickTrue = true;
                    self.breadCopyLists.push({
                        name: self.deptLeftList[index].name,
                        id: self.deptLeftList[index].id,
                        isCompany: self.deptLeftList[index].isCompany,
                    });
                    if (self.breadCopyLists.length < 4) {
                        self.breadListsOvShow = false;
                        self.breadLists.push({
                            name: self.deptLeftList[index].name,
                            isCompany: self.deptLeftList[index].isCompany,
                            id: self.deptLeftList[index].id
                        });
                    } else {
                        self.breadListsOvShow = true;
                        self.breadLists.shift();
                        self.breadLists.push({
                            name: self.deptLeftList[index].name,
                            id: self.deptLeftList[index].id,
                            isCompany: self.deptLeftList[index].isCompany,
                        });
                    }
                    self.transferselectAllShow = false;
                    self.isBreadMainSeleteLi = self.breadLists.length - 1;
                    self.leftSearchVal = ''
                    console.log(self.breadLists)

                    self.getapideptfinddeptmembertree({
                        search: '',
                        type: self.breadLists.length == 2 ? 0 : 1,
                        id: self.deptLeftList[index].id
                    }).then(data => {
                        self.leftNextClickTrue = false;
                        self.memberLeftList = [];
                        self.deptLeftList = [];
                        if (data.statusCode == 200) {
                            if (data.data) {
                                if (data.data.child) {
                                    var arr = [];
                                    data.data.child.forEach(function (ele, ind) {
                                        arr.push({
                                            id: ele.id,
                                            name: ele.name,
                                            show: false,
                                            isCompany: ele.isCompany
                                        });
                                    });
                                    self.deptLeftList = arr;
                                }
                                if (data.data.members) {
                                    var arr = [];
                                    data.data.members.forEach(function (ele, ind) {
                                        arr.push({
                                            memberId: ele.id,
                                            name: ele.name,
                                            show: false,
                                        });
                                    });
                                    self.memberLeftList = arr;
                                }
                                var leftPSlectArr = [];
                                self.memberLeftList.forEach(function (elel, indl) {
                                    self.memberRightList.forEach(function (eler, indr) {
                                        if (eler.memberId == elel.memberId) {
                                            leftPSlectArr.push(eler);
                                            self.memberLeftList[indl].show = true;
                                        }
                                    });
                                });
                                if (leftPSlectArr.length == self.memberLeftList.length) {
                                    self.transferselectAllShow = true;
                                } else {
                                    self.transferselectAllShow = false;
                                }
                            }
                        } else {
                            self.$message({
                                type: "info",
                                message: data.statusMessage
                            });
                        }
                    }).catch(msg => {
                        self.leftNextClickTrue = false;
                        self.memberLeftList = [];
                        self.deptLeftList = [];
                        self.$message({
                            type: "info",
                            message: "服务器异常"
                        });
                    });
                }
            },
            // 左边全选
            leftSelectAllClick() {
                var self = this;
                var leftPArr = [];
                var leftPSlectArr = [];
                self.transferselectAllShow = !self.transferselectAllShow;
                self.memberLeftList.forEach(function (elel, indl) {
                    elel.show = self.transferselectAllShow;
                    leftPArr.push(elel);
                    self.memberRightList.forEach(function (eler, indr) {
                        if (elel.memberId == eler.memberId) {
                            eler.show = self.transferselectAllShow;
                        }
                    });
                    if (elel.show == true) {
                        self.memberRightList.push(elel);
                        leftPSlectArr.push(elel);
                    }
                });
                if (leftPSlectArr.length == leftPArr.length) {
                    self.transferselectAllShow = true;
                } else {
                    self.transferselectAllShow = false;
                }
                // 获取右边所有当前列表中包含的参数
                var indexArr = [];
                self.memberRightList.forEach(function (ele, ind) {
                    if (ele.show == false) {
                        indexArr.push({ memberId: ele.memberId });
                    }
                });
                // 数组去重
                var hash = {};
                self.memberRightList = self.memberRightList.reduce(function (item, next) {
                    hash[next.memberId]
                        ? ""
                        : (hash[next.memberId] = true && item.push(next));
                    return item;
                }, []);
                // 数组求差集
                var isNaN = Number.isNaN;
                self.memberRightList = self.memberRightList.reduce(function (previous, i) {
                    var found = indexArr.findIndex(function (j) {
                        return (
                            j.memberId === i.memberId ||
                            (isNaN(i.memberId) && isNaN(j.memberId))
                        );
                    });
                    return found < 0 && previous.push(i), previous;
                }, []);
            },
            // 左边点击选中
            transferPLListsSelectClick(index) {
                var self = this;
                var leftPSlectArr = [];
                // 修改勾选
                self.memberLeftList[index].show = !self.memberLeftList[index]
                    .show;
                // 当左边取消时，右边也跟随取消
                if (self.memberLeftList[index].show == false) {
                    self.memberRightList.forEach(function (ele, ind) {
                        if (ele.memberId == self.memberLeftList[index].memberId) {
                            self.memberRightList[ind].show = false;
                            self.memberRightList.splice(ind, 1);
                        }
                    });
                }
                self.memberLeftList.forEach(function (ele, ind) {
                    if (ele.show == true) {
                        self.memberRightList.push(ele);
                        leftPSlectArr.push(ele);
                    }
                });

                var hash = {};
                self.memberRightList = self.memberRightList.reduce(function (item, next) {
                    hash[next.memberId]
                        ? ""
                        : (hash[next.memberId] = true && item.push(next));
                    return item;
                }, []);
                if (leftPSlectArr.length == self.memberLeftList.length) {
                    self.transferselectAllShow = true;
                } else {
                    self.transferselectAllShow = false;
                }
            },
            // 右边选中删除
            righttransferPRListsClick(index) {
                var self = this;
                var leftPArr = [];
                var leftPSlectArr = [];
                self.memberRightList[index].show = !self.memberRightList[index].show;
                // 修改左边勾选状态
                self.memberLeftList.forEach(function (ele, ind) {
                    if (ele.memberId == self.memberRightList[index].memberId) {
                        self.memberLeftList[ind].show = false;
                    }
                });
                self.memberRightList.splice(index, 1);
                self.memberLeftList.forEach(function (ele, ind) {
                    if (ele.show == true) {
                        leftPSlectArr.push(ele);
                    }
                });
                if (leftPSlectArr.length == self.memberLeftList.length) {
                    self.transferselectAllShow = true;
                } else {
                    self.transferselectAllShow = false;
                }
            },
            ...mapActions(["getapideptfinddeptmembertree"])
        },
        filters: {
            userNickFun: function (val) {
                if (val) {
                    if (val.length > 1) {
                        return val.slice(val.length - 1, val.length);
                    } else {
                        return val;
                    }
                } else {
                    return "";
                }
            }
        }
    };
</script>
<style scoped>
    .transferMlListLiRight {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-right: 11px;
        color: #333;
    }

    .transferMlListLiRight img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }

    .trMlLiLiLeSlectTypeDept {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 200px;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        color: #333;
        margin-left: 5px;
        /* border: 1px solid red; */
    }

    .trMlLiLiLeSlectType img {
        width: 20px;
        height: 20px;
    }

    .trMlLiLiLeSlectType>div:nth-child(2) {
        max-width: 200px;
        margin-left: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .trMlLiLiLeSlectTypeOne img {
        width: 100%;
        height: 100%;
    }

    .trMlLiLiLeSlectTypeOne div {
        position: absolute;
        top: 0;
        width: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
        line-height: 20px;
        text-align: center;
        font-size: 12px;
        background-color: #38adff;
        color: #fff;
    }

    .trMlLiLiLeSlectTypeOne {
        position: relative;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
    }

    .trMlLiLiLeSlectType {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        margin-left: 5px;
        color: #333;
    }

    .trMlLiLiLeSlect {
        height: 20px;
        width: 20px;
    }

    .trMlLiLiLeSlect>div {
        width: 20px;
        height: 20px;
    }

    .trMlLiLiLeSlect img {
        width: 20px;
        height: 20px;
    }

    .transferMlListLiLeft {
        min-width: 10px;
        display: flex;
        align-items: center;
        margin-left: 17px;
    }

    .transferMlListNullLi {
        width: 100%;
        width: 100%;
        height: 75px;
        line-height: 75px;
        margin-top: 3px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }

    .transferMlListLi:hover {
        background-color: rgb(231, 234, 239);
    }

    .transferMlListLi {
        width: 100%;
        height: 35px;
        margin-top: 3px;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
    }

    .transfer-ml-searchList {
        display: flex;
        height: 260px;
        width: 100%;
        margin-top: 5px;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .transfer-ml-list ul {
        width: 100%;
    }

    .transfer-ml-list {
        display: flex;
        height: 200px;
        width: 100%;
        margin-top: 5px;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .transfer-ml-selectAllMain>div:nth-child(1) {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .transfer-ml-selectAllMain>div:nth-child(2) {
        font-size: 14px;
        margin-left: 7px;
        cursor: pointer;
    }

    .transfer-ml-selectAllMain>div img {
        width: 20px;
        height: 20px;
    }

    .transfer-ml-selectAllMain {
        width: 90%;
        display: flex;
        height: 20px;
        overflow: hidden;
        align-items: center;
    }

    .transfer-ml-selectAll {
        display: flex;
        height: 22px;
        width: 100%;
        overflow: hidden;
        justify-content: center;
        margin-top: 5px;
    }

    .breadMainLiBack {
        color: #38adff;
        width: 12px;
        height: 20px;
        cursor: pointer;
        margin-right: 5px;
    }

    .breadMainLi {
        display: flex;
        align-items: center;
        margin-right: 5px;
    }

    .breadMainLi>div:nth-child(1) {
        color: #38adff;
        font-size: 14px;
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    .breadMainLi>div:nth-child(2) {
        font-size: 14px;
        color: #ccc;
        margin-left: 5px;
    }

    .breadMainSeleteLi>div:nth-child(1) {
        color: #333 !important;
    }

    .transfer-ml-breadMain ul {
        display: flex;
        height: 20px;
        width: 100%;
        overflow: hidden;
    }

    .transfer-ml-breadMain {
        width: 90%;
        display: flex;
        height: 20px;
        overflow: hidden;
    }

    .transfer-ml-bread {
        min-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 8px;
    }

    .transfer-ml-search>div {
        width: 90%;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        height: 32px;
        border-radius: 4px;
        background-color: #fff;
        overflow: hidden;
    }

    .transfer-ml-search input {
        font-size: 14px;
        border: 0px solid #ccc;
        min-height: 25px;
        border-radius: 5px;
        height: 32px;
        width: calc(100% - 10px);
        background-color: #fff;
    }

    .transfer-ml-search>div>div:nth-child(1) {
        width: 32px;
        display: flex;
        align-items: center;
        height: 32px;
        justify-content: center;
    }

    .transfer-ml-search>div>div:nth-child(2) {
        width: calc(100% - 55px);
    }

    .transfer-ml-search>div>div:nth-child(1) img {
        width: 15px;
        height: 15px;
    }

    .transfer-ml-search>div>div:nth-child(3) {
        width: 20px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .transfer-ml-search>div>div:nth-child(3) img {
        width: 15px;
        height: 15px;
    }

    .transfer-ml-search {
        height: 37px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        margin-top: 15px;
    }

    .transferPRLi {
        width: 100%;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 5px;
        cursor: pointer;
    }

    .transferPRLi:hover {
        background-color: rgb(231, 234, 239);
    }

    .transferPRLi>div:nth-child(1) {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #333;
        margin-left: 15px;
    }

    .transferPRLi>div:nth-child(2) {
        font-size: 14px;
        color: #ccc;
        margin-left: 15px;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        border: 1px solid #ccc;
        cursor: pointer;
        text-align: center;
        line-height: 18px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .transferPRLi>div:nth-child(1)>div {
        max-width: 200px;
        overflow: hidden;
        margin-left: 7px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .transferPRLi>div:nth-child(1) img {
        width: 25px;
        height: 25px;
    }

    .transfer-mainRight {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .transfer-main {
        width: 92%;
        height: 50px;
        font-size: 16px;
        color: #333;
        height: 350px;
        background-color: #f4f6f8;
        border-radius: 5px;
        border: 1px solid #ccc;
    }

    .transfer-title {
        width: 92%;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: #333;
    }

    .transfer-left {
        width: 50%;
        height: 420px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-right: 15px;
    }

    .transfer-right {
        width: 50%;
        height: 420px;
        padding-left: 15px;
    }

    .up-content-main {
        height: 430px;
        width: 100%;
        border-top: 1px solid #e5e5e5;
        display: flex;
        justify-content: space-around;
    }

    .up-content-but {
        height: 60px;
        width: 100%;
        background-color: #f0f6fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #e5e5e5;
    }

    .up-content-but>div:nth-child(2) {
        width: 55px;
        height: 35px;
        border-radius: 4px;
        background-color: #38adff;
        text-align: center;
        line-height: 35px;
        color: #fff;
        margin-right: 25px;
        cursor: pointer;
    }

    .up-content-title>div:nth-child(1) {
        margin-left: 15px;
    }

    .up-content-title>div:nth-child(2) {
        margin-right: 15px;
        font-size: 16px;
        color: #ccc;
        cursor: pointer;
    }

    .up-content-title {
        height: 50px;
        width: 100%;
        background-color: #f0f6fa;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .updatePwd-content {
        width: 90%;
        max-width: 850px;
        min-width: 850px;
        height: 550px;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        margin-top: 70px;
    }

    .updatePwd {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .slide-fade-enter-active {
        transition: all 0.7s ease;
    }

    .slide-fade-enter,
    .slide-fade-leave-active {
        transform: translateY(-30px);
        opacity: 0;
    }

    .transferMlListNullLi {
        width: 100%;
        width: 100%;
        height: 75px;
        line-height: 75px;
        margin-top: 3px;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
    }
</style>